<!--
 * @Author: rxn 1003312535@qq.com
 * @Date: 2024-07-05 15:25:53
 * @LastEditors: rxn 1003312535@qq.com
 * @LastEditTime: 2024-07-24 16:24:47
 * @FilePath: \vue3-progect\src\views\example\three\geometry\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--相机基础-->
<template>
	<div id="three_container"></div>
</template>

<script setup>
import * as THREE from "three";
import { onMounted, ref } from "vue";
//-
import { AxesHelper } from "../case/helper/AxesHelper";
//-
import { createCamera, animate, createRenderer } from "../js/init";
import { onResize } from "../case/helper/onResize.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { henanData } from "./henan.js";
let scene, renderer, camera, controls;
// 渲染循环
let angle = 0; //用于圆周运动计算的角度值
const R = 100; //相机圆周运动的半径
onMounted(() => {
	let container = document.getElementById("three_container");
	scene = new THREE.Scene();
	// 正投影相机
	const width = container.offsetWidth; //canvas画布宽度
	const height = container.offsetHeight; //canvas画布高度
	const k = width / height; //canvas画布宽高比
	const s = 200; //控制left, right, top, bottom范围大小
	camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 11000);
	// camera.position.set(200, 300, 200); //设置相机位置
	// camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
	// camera = createCamera(THREE, container);

	//--
	renderer = new THREE.WebGLRenderer({
		antialias: true
	});
	renderer.setSize(container.offsetWidth, container.offsetHeight);
	container.appendChild(renderer.domElement);

	renderer.render(scene, camera);

	//--
	controls = new OrbitControls(camera, renderer.domElement);
	controls.update();
	//--
	const axesHelper = new THREE.AxesHelper(800);
	scene.add(axesHelper);
	animate11(renderer, scene, camera);
	//--
	const ambient = new THREE.AmbientLight("#ffffff");
	scene.add(ambient);
	demo();
});

const animate11 = (renderer, scene, camera) => {
	requestAnimationFrame(animate11.bind(this, renderer, scene, camera));
	renderer.render(scene, camera);
};
const demo = () => {
	const geometry = new THREE.BoxGeometry(100, 100, 100);
	const material = new THREE.MeshBasicMaterial({
		color: 0xff0000,
		transparent: true,
		opacity: 0.5
	});
	const mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);
	const box3 = new THREE.Box3();
	box3.expandByObject(mesh);
	const helper = new THREE.Box3Helper(box3, 0xffffff);
	scene.add(helper);
	const scale = new THREE.Vector3();
	// getSize()计算包围盒尺寸
	// 获得包围盒长宽高尺寸，结果保存在参数三维向量对象scale中
	box3.getSize(scale);
	console.log("模型包围盒尺寸", scale);
	// 计算包围盒中心坐标
	const center = new THREE.Vector3();
	box3.getCenter(center);
	console.log("模型中心坐标", center);

	/**
	 * 地图案例会涉及到几何体、包围盒、正投影相机三方面知识点。
	 */
	let map = new THREE.Group();
	henanData.features.forEach((item) => {
		let group = new THREE.Group();
		item.geometry.coordinates.forEach((it) => {
			if (item.geometry.type == "MultiPolygon") {
				it.forEach((data) => fn(data));
			} else {
				fn(it);
			}
			function fn(data) {
				let mesh = createPlaneMesh(data);

				group.add(mesh);
			}
			map.add(group);
		});
	});
	scene.add(map);
	const x = 113.51,
		y = 33.88;
	//与观察点x、y一样，地图平行与canvas画布
	camera.position.set(x, y, 300);
	camera.lookAt(x, y, 0);
	controls.target.set(x, y, 0); //与lookAt参数保持一致
	controls.update();
};

const createPlaneMesh = (data) => {
	// console.log(data, "data");
	let group = new THREE.Group();
	let vertices = [];
	let Shape = new THREE.Shape();
	data.forEach((item, index) => {
		let [x, y] = item;
		if (index == 0) {
			Shape.moveTo(x, y); //起点
		} else {
			Shape.lineTo(x, y);
		}
	});
	const geometry = new THREE.ShapeGeometry(Shape);
	const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
	const mesh = new THREE.Mesh(geometry, material);
	group.add(mesh);
	return group;
};
</script>

<style lang="less" scoped>
#three_container {
	height: 100%;
}
.downLoadBtn {
	position: absolute;
	right: 0;
	top: 10px;
	z-index: 99;
}
</style>
